<template>
  <div class="template-appointmentOfInspectorsForm-Lu">
    <a-modal
      title="审评员聘任"
      :visible="increaseVisible"
      :maskClosable="false"
      :closable="true"
      :destroyOnClose="true"
      width="100%"
      :footer="false"
      :dialog-style="{ margin: '0 auto' }"
      wrapClassName="form-appointmentOfInspectorsModal-Lu"
      @cancel="closeVisible">
      <div style="height: calc(100vh - 125px);">
        <a-steps :current="current" style="width: 50%;margin: 0 auto;">
          <a-step v-for="item in steps" :key="item.title" :title="item.title" />
        </a-steps>
        <a-form layout="inline" class="personal-info-form" :form="form">
          <div v-if="current == 0" class="steps-content">
            <a-tabs type="card" @change="callback">
              <a-tab-pane key="1" tab="聘任信息">
                <a-collapse v-model="activeKey" :expand-icon-position="expandIconPosition" @change="collapseChange">
                  <a-collapse-panel key="1" header="见习审评情况查询">
                    <a-descriptions bordered style="width: 100%;" :column="3" class="descriptions-dengji">
                      <a-descriptions-item :span="2">
                        <span slot="label" class="descriptions-label-slot">
                          <span class="xhText" >*</span>
                          审评类型
                        </span>
                        <a-form-item class="flex-w-row">
                          <compSelector
                            :key="compSelectorkey"
                            :defaultValue="fromState.fxpjcylb"
                            :compType="typeCheckbox"
                            class="comp-select-box-a"
                            dictionaryType="检查员登记类别"
                            :height="32"
                            @selectHandleChange="flbChange"
                            v-decorator="[ 'fxpjcylb', {initialValue:fromState.fxpjcylb,rules:rules.fxpjcylb}]"/>
                        </a-form-item>
                      </a-descriptions-item>
                      <a-descriptions-item :span="2">
                        <span slot="label" class="descriptions-label-slot">
                          审评时间
                        </span>
                        <a-form-item>
                            <a-range-picker
                              v-model="time"
                              format="YYYY-MM-DD"
                              @change="onChange"/>
                        </a-form-item>
                      </a-descriptions-item>
                      <a-descriptions-item>
                        <span slot="label" class="descriptions-label-slot">
                          审评次数
                        </span>
                        <a-form-item>
                          <a-select :default-value="2" style="width: 60px;" v-model="fromState.fyqjccs">
                              <a-select-option :value="1" key="1">
                                1
                              </a-select-option>
                              <a-select-option :value="2" key="2">
                                2
                              </a-select-option>
                            </a-select>
                          <span style="margin-left: 5px;">次以上</span>
                        </a-form-item>
                      </a-descriptions-item>
                      <a-descriptions-item>
                        <span slot="label" class="descriptions-label-slot">
                          考评结果
                        </span>
                        <a-form-item>
                            <a-checkbox-group v-model="fromState.fyqkpjg" :default-value="ssss">
                              <a-checkbox value="优秀">
                                优秀
                              </a-checkbox>
                              <a-checkbox value="合格">
                                合格
                              </a-checkbox>
                              <a-checkbox value="不合格">
                                不合格
                              </a-checkbox>
                            </a-checkbox-group>
                        </a-form-item>
                      </a-descriptions-item>
                      <a-descriptions-item class="descriptions-row">
                        <span slot="label" class="descriptions-label-slot">
                          是否要求所选审评类型均满足上诉要求
                        </span>
                        <a-form-item>
                            <a-select default-value="否" style="width: 100px;" v-model="fromState.fsfjmzyq">
                              <a-select-option value="是">
                                是
                              </a-select-option>
                              <a-select-option value="否">
                                否
                              </a-select-option>
                            </a-select>
                        </a-form-item>
                      </a-descriptions-item>
                    </a-descriptions>
                    <div style="text-align: center;margin-top: 10px;">
                      <!-- <a-button class="blue-btn" @click="saveClick()">
                          暂存
                      </a-button> -->
                      <a-button :loading="loading" class="blue-btn" style="margin-left: 10px;" @click="createTableClick">
                          生成列表
                      </a-button>
                    </div>
                  </a-collapse-panel>
                </a-collapse>
                <div class="commpVxeTable-table">
                  <h1 style="text-align: center;margin-bottom: 0;">拟聘任名单</h1>
                  <commpVxeTable
                    :key="reCommpVxeTable"
                    :occupancyHeight="FirstContentHeight"
                    :conditionBtnRow="true"
                    :config="dataTableConfig"
                    :columns="columnsVxe"
                    :formItem="formItem"
                    @checkboxChange="checkboxChange"
                    ref="administrativeOffice"
                    @searchEvent="searchEvent"
                    @resetEvent="resetEvent"
                    >
                    <template v-slot:externalOperations="{data}">
                      <vxe-form-item>
                        <template>
                          <a-button class="blue-btn" @click="addManClick" icon="plus">手动添加</a-button>
                        </template>
                      </vxe-form-item>
                      <vxe-form-item>
                        <template>
                          <a-button class="blue-btn" @click="exportClick('拟聘任名单')" icon="export">导出</a-button>
                        </template>
                      </vxe-form-item>
                      <vxe-form-item>
                        <template>
                          <a-button class="red-btn" @click="deleteClick" icon="delete">移出名单</a-button>
                        </template>
                      </vxe-form-item>
                    </template>
                    <template v-slot:operation_realname="{row}" data-desc="姓名">
                      <span style="padding-right: 21;" v-if="row.realname.length == 2">
                          <span v-for="(trem,tI) in row.realname.split('')" :key="tI" >
                              {{trem}}
                              <span v-if="tI+1 !== row.realname.split('').length">&nbsp;&nbsp;</span>
                          </span>
                      </span>
                      <span style="padding-right: 21;" v-else>{{ row.realname }}</span>
                    </template>
                    <template v-slot:operation_fxl="{row}" data-desc="学历">
                      {{ row.fxl }}/{{ row.fsxzy }}
                    </template>
                    <template v-slot:operation_sex="{row}" data-desc="性别">
                      <span v-if="row.sex == 1">男</span>
                      <span v-if="row.sex == 2">女</span>
                    </template>
                    <template v-slot:operation_fjcyxl="{row}" data-desc="审评类型及次数">
                      <span>{{ row.fjcyxl }} （{{ row.fjccs }}）</span>
                    </template>
                  </commpVxeTable>
                </div>
              </a-tab-pane>
              <a-tab-pane key="2" tab="事项审批">
                <approvalOfMatters
                    ref="approvalOfMattersRef1"
                    :key="approvalOfMattersKey"
                    :conInterface="conInterface">
                </approvalOfMatters>
              </a-tab-pane>
            </a-tabs>
          </div>
          <div v-if="current == 1" class="steps-content">
              <a-descriptions :column="3" bordered style="width: 100%;" class="descriptions-dengji">
                  <a-descriptions-item>
                      <span slot="label" class="descriptions-label-slot">
                          <span class="xhText" >*</span>
                          公示开始时间
                      </span>
                      <a-form-item prop="fgskssj">
                        <a-date-picker format="YYYY-MM-DD" @change="fgskssjChange"
                        v-decorator="[ 'fgskssj', {initialValue:fromState.fgskssj,rules: rules.fgskssj}]"/>
                      </a-form-item>
                  </a-descriptions-item>
                  <a-descriptions-item>
                      <span slot="label" class="descriptions-label-slot">
                          <span class="xhText" >*</span>
                          公示结束时间
                      </span>
                      <a-form-item prop="fgsjssj">
                        <a-date-picker format="YYYY-MM-DD" @change="fgsjssjChange"
                        v-decorator="[ 'fgsjssj', {initialValue:fromState.fgsjssj,rules: rules.fgsjssj}]"/>
                      </a-form-item>
                  </a-descriptions-item>
                  <a-descriptions-item>
                      <span slot="label" class="descriptions-label-slot">
                          <span class="xhText" >*</span>
                          公示部门
                      </span>
                      <a-form-item prop="fgsbm">
                        <a-input placeholder="请输入公示部门" v-model="fromState.fgsbm"
                        v-decorator="[ 'fgsbm', {initialValue:fromState.fgsbm,rules: rules.fgsbm}]"/>
                      </a-form-item>
                  </a-descriptions-item>
                  <a-descriptions-item>
                      <span slot="label" class="descriptions-label-slot">
                          <span class="xhText" >*</span>
                          公示地点
                      </span>
                      <a-form-item prop="fgsdd">
                        <a-input placeholder="请输入公示地点" v-model="fromState.fgsdd"
                        v-decorator="[ 'fgsdd', {initialValue:fromState.fgsdd,rules: rules.fgsdd}]"/>
                      </a-form-item>
                  </a-descriptions-item>
                  <a-descriptions-item :span="3">
                      <span slot="label" class="descriptions-label-slot">
                          备注说明
                      </span>
                      <a-form-item style="width: 100%;" prop="fgsbzsm" class="flex-w-row">
                        <a-textarea placeholder="请输入备注说明" v-model="fromState.fgsbzsm" :auto-size="{ minRows: 2}"/>
                      </a-form-item>
                  </a-descriptions-item>
              </a-descriptions>
            <div style="text-align: center;">
              <a-button class="blue-btn" @click="saveClick()">
                  暂存
              </a-button>
            </div>
            <div class="commpVxeTable-table">
              <h1 style="text-align: center;margin-bottom: 0;">公示人员名单</h1>
              <commpVxeTable
                :key="reCommpVxeTable"
                :occupancyHeight="220"
                :conditionBtnRow="true"
                :config="dataTableConfig"
                :columns="columnsVxeGs"
                :formItem="formItem"
                @checkboxChange="checkboxChange"
                ref="administrativeOffice"
                @searchEvent="searchEvent"
                @resetEvent="resetEvent"
                >
                <template v-slot:externalOperations="{data}"  >
                  <vxe-form-item>
                    <template>
                      <a-button class="blue-btn" @click="exportClick('公示人员名单')" icon="export">导出</a-button>
                    </template>
                  </vxe-form-item>
                  <vxe-form-item>
                    <template>
                      <a-button class="red-btn" @click="deleteClick" icon="delete">移出名单</a-button>
                    </template>
                  </vxe-form-item>
                </template>
                <template v-slot:operation_realname="{row}" data-desc="姓名">
                  <span style="padding-right: 21;" v-if="row.realname.length == 2">
                      <span v-for="(trem,tI) in row.realname.split('')" :key="tI" >
                          {{trem}}
                          <span v-if="tI+1 !== row.realname.split('').length">&nbsp;&nbsp;</span>
                      </span>
                  </span>
                  <span style="padding-right: 21;" v-else>{{ row.realname }}</span>
                </template>
                <template v-slot:operation_fxl="{row}" data-desc="学历">
                  {{ row.fxl }}/{{ row.fsxzy }}
                </template>
                <template v-slot:operation_sex="{row}" data-desc="性别">
                  <span v-if="row.sex == 1">男</span>
                  <span v-if="row.sex == 2">女</span>
                </template>
              </commpVxeTable>
            </div>
          </div>
          <div v-if="current == 2" class="steps-content">
            <a-tabs type="card" @change="callbackDj">
              <a-tab-pane key="1" tab="聘任登记信息">
                <h2 style="margin: 10px;">聘任登记</h2>
                <a-descriptions bordered style="width: 100%;" :column="3" class="descriptions-dengji">
                  <a-descriptions-item :span="2">
                          <span slot="label" class="descriptions-label-slot">
                              <span class="xhText" >*</span>
                              聘任文号
                          </span>
                          <a-form-item ref="fprwh" prop="fprwh">
                              <a-input
                                  v-model="fromState.fprwh"
                                  placeholder="请输入聘任文号"
                                  v-decorator="[ 'fprwh', {initialValue:fromState.fprwh,rules: rules.fprwh}]"
                              />
                          </a-form-item>
                          <span style="margin-left: 10px;line-height: 3.5;">
                            <a-upload style="display: inline-block;" :beforeUpload="beforeUpload" :showUploadList="false" action="" @change="uploadClick">
                              <span class="xhText" >*</span>
                              <a-button class="blue-btn">选择文件<span style="color: red;">(仅限PDF)</span></a-button>
                            </a-upload>
                              <a href="#" style="margin-left: 5px;" v-if="fromState.fprfjdz" @click="downloadPdf(fromState.fprfjdz)">{{fileName}}</a>
                              <span style="margin-left: 5px;" v-else>{{fileName}}</span>
                          </span>
                      </a-descriptions-item>
                      <a-descriptions-item>
                        <span slot="label" class="descriptions-label-slot">
                          聘任身份
                        </span>
                        <a-form-item>
                            <a-radio-group v-model="fromState.fprsf" @change="fprsfChange">
                              <a-radio value="组长">
                                组长
                              </a-radio>
                              <a-radio value="组员">
                                组员
                              </a-radio>
                            </a-radio-group>
                        </a-form-item>
                      </a-descriptions-item>
                      <a-descriptions-item>
                        <span slot="label" class="descriptions-label-slot">
                          <span class="xhText" >*</span>
                            聘任开始时间
                        </span>
                        <a-form-item>
                            <a-date-picker format="YYYY-MM-DD" @change="fprsjChange"
                            v-decorator="[ 'fprsj', {initialValue:fromState.fprsj,rules: rules.fprsj}]"/>
                        </a-form-item>
                      </a-descriptions-item>
                      <a-descriptions-item>
                          <span slot="label" class="descriptions-label-slot">
                              <span class="xhText" >*</span>
                              聘期
                          </span>
                          <a-form-item prop="fpq">
                            <a-input-number placeholder="请输入聘期"
                            @change="fpqChange" style="width: 180px"
                            v-decorator="[ 'fpq', {initialValue:fromState.fpq,rules: rules.fpq}]"/>
                            (年)
                          </a-form-item>
                      </a-descriptions-item>
                      <a-descriptions-item>
                          <span slot="label" class="descriptions-label-slot">
                              聘任结束时间
                          </span>
                          <a-form-item prop="fprjssj">
                            <a-input disabled placeholder="自动计算，无需填写" v-model="fromState.fprjssj"/>
                          </a-form-item>
                      </a-descriptions-item>
                      <a-descriptions-item :span="3">
                        <span slot="label" class="descriptions-label-slot">
                          备注说明
                        </span>
                        <a-form-item style="width: 100%;" class="descriptions-content-item">
                          <a-textarea placeholder="请输入备注说明" v-model="fromState.fprbzsm" :auto-size="{ minRows: 2}"/>
                        </a-form-item>
                      </a-descriptions-item>
                </a-descriptions>
                <commpVxeTable
                    :key="reCommpVxeTable"
                    :occupancyHeight="350"
                    :conditionBtnRow="true"
                    :config="dataTableConfig"
                    :columns="columnsVxeGs"
                    ref="administrativeOffice"
                    >
                    <template v-slot:operation_realname="{row}" data-desc="姓名">
                      <span style="padding-right: 21;" v-if="row.realname.length == 2">
                          <span v-for="(trem,tI) in row.realname.split('')" :key="tI" >
                              {{trem}}
                              <span v-if="tI+1 !== row.realname.split('').length">&nbsp;&nbsp;</span>
                          </span>
                      </span>
                      <span style="padding-right: 21;" v-else>{{ row.realname }}</span>
                    </template>
                    <template v-slot:operation_fxl="{row}" data-desc="学历">
                      {{ row.fxl }}/{{ row.fsxzy }}
                    </template>
                    <template v-slot:operation_sex="{row}" data-desc="性别">
                      <span v-if="row.sex == 1">男</span>
                      <span v-if="row.sex == 2">女</span>
                    </template>
                </commpVxeTable>
              </a-tab-pane>
              <a-tab-pane key="2" tab="事项审批">
                <approvalOfMatters
                    ref="approvalOfMattersRef1"
                    :key="approvalOfMattersKey"
                    :conInterface="conInterface2">
                </approvalOfMatters>
              </a-tab-pane>
            </a-tabs>
          </div>
          <div v-if="current == 3" class="steps-content" style="background-color: white;">
            <a-descriptions title="聘任审评员信息" bordered class="view-descriptions">
              <a-descriptions-item label="聘任文号">
                {{ fromState.fprwh }}
              </a-descriptions-item>
              <a-descriptions-item label="聘任时间">
                {{ moment(fromState.fprsj).format('YYYY-MM-DD') }} - {{ fromState.fprjssj }}
              </a-descriptions-item>
              <a-descriptions-item label="聘期">
                {{ fromState.fpq }} 年
              </a-descriptions-item>
              <a-descriptions-item label="聘任身份">
                {{ fromState.fprsf }}
              </a-descriptions-item>
              <a-descriptions-item label="聘任备注说明" :span="2">
                {{ fromState.fprbzsm }}
              </a-descriptions-item>
              <a-descriptions-item label="拟聘审评类型">
                {{ fromState.fxpjcylb?fromState.fxpjcylb.toString():'' }}
              </a-descriptions-item>
              <!--
              <a-descriptions-item label="考评结果">
                {{ fromState.fyqkpjg?fromState.fyqkpjg.toString():'' }}
              </a-descriptions-item> -->
              <a-descriptions-item label="公示时间">
                {{ moment(fromState.fgskssj).format('YYYY-MM-DD') }} - {{ moment(fromState.fgsjssj).format('YYYY-MM-DD') }}
              </a-descriptions-item>
              <a-descriptions-item label="公示部门">
                {{ fromState.fgsbm }}
              </a-descriptions-item>
              <a-descriptions-item label="公示地点">
                {{ fromState.fgsdd }}
              </a-descriptions-item>
              <a-descriptions-item label="公示备注说明" :span="2">
                {{ fromState.fgsbzsm }}
              </a-descriptions-item>
            </a-descriptions>
            <commpVxeTable
                :key="reCommpVxeTable"
                :occupancyHeight="350"
                :conditionBtnRow="true"
                :config="dataTableConfig"
                :columns="columnsVxeGs"
                ref="administrativeOffice"
                >
                <template v-slot:operation_realname="{row}" data-desc="姓名">
                  <span style="padding-right: 21;" v-if="row.realname.length == 2">
                      <span v-for="(trem,tI) in row.realname.split('')" :key="tI" >
                          {{trem}}
                          <span v-if="tI+1 !== row.realname.split('').length">&nbsp;&nbsp;</span>
                      </span>
                  </span>
                  <span style="padding-right: 21;" v-else>{{ row.realname }}</span>
                </template>
                <template v-slot:operation_fxl="{row}" data-desc="学历">
                  {{ row.fxl }}/{{ row.fsxzy }}
                </template>
                <template v-slot:operation_sex="{row}" data-desc="性别">
                  <span v-if="row.sex == 1">男</span>
                  <span v-if="row.sex == 2">女</span>
                </template>
              </commpVxeTable>
          </div>
        </a-form>

      </div>
      <div class="steps-action">
        <a-button v-if="current > 0 && current !== 3" :class="current == 3?'blue-btn':''" @click="prev">
          上一步
        </a-button>
        <a-button v-if="current < steps.length - 2" class="blue-btn" style="margin-left: 8px" @click="next">
          下一步
        </a-button>
        <a-button
          v-if="current == steps.length - 2"
          class="blue-btn"
          style="margin-left: 8px"
          @click="next"
        >
          完成入库
        </a-button>
      </div>
    </a-modal>
    <checkManModal ref="checkManModalRef" @checkManFuntion="checkManFuntion"></checkManModal>
    <handleModal ref="handleModalRef" @resetEvent="resetEventXz"></handleModal>
  </div>
</template>
<script>
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
import compSelector from '@/components/compSelector/compSelector'
import handleModal from '../administrativeOffice-new/modal/handleModal.vue'
import approvalOfMatters from '@/components/approvalOfMatters/approvalOfMatters.vue'
import { typeCheckbox } from '@/components/compSearchCriteria/ContractType'
import { savePrdj,submitPrdj,uploadPrdjFile,returnPrdj,queryPrdjById,genNprymd,nprymdPageList,
          nprymdByYcmd,exportNprymd,sddjRymd,initJcyPrInNpmdlc,queryByJodId,viewXzswlc,deletXzswlc,initJcyPrInPrmdqrlc} from './service/index'
import  assessCheckApi  from './service/api'
import checkManModal from './checkManModal.vue'
import moment from 'moment'
export default {
  components:{
    commpVxeTable,compSelector,checkManModal,handleModal,approvalOfMatters
  },
  data() {
    return {
      increaseVisible: false,
      form: this.$form.createForm(this, { fprwh: 'appointmentOfInspectorsFrom' }),
      fromState:{
        fprsf: '组员',
        fyqkpjg: ['合格'],
        fsfjmzyq: '否',
        fyqjccs: 2
      },
      rules:{
        fprwh: [{
            required: true,
            message: '请输入聘任文号',
            trigger: 'blur',
        }],
        fprsj: [{
            type: 'object',
            required: true,
            message: '请选择聘任时间',
            trigger: 'blur',
        }],
        fxpjcylb: [{
            type: 'array',
            required: true,
            message: '请选择拟聘审评类型',
            trigger: 'blur',
        }],
        fgskssj: [{
            type: 'object',
            required: true,
            message: '请选择公示开始时间',
            trigger: 'blur',
        }],
        fgsjssj: [{
            type: 'object',
            required: true,
            message: '请选择公示结束时间',
            trigger: 'blur',
        }],
        fgsbm: [{
            required: true,
            message: '请输入公示部门',
            trigger: 'blur',
        }],
        fgsdd: [{
            required: true,
            message: '请输入公示地点',
            trigger: 'blur',
        }],
        fpq: [{
          type: 'number',
            required: true,
            message: '请输入聘期',
            trigger: 'blur',
        }],
      },
      moment,
      current: 0,
      steps: [
        {
          title: '见习审评情况查询',
          content: 'First-content',
        },
        {
          title: '公示登记',
          content: 'Second-content',
        },
        {
          title: '聘任登记',
          content: 'third-content',
        },
        {
          title: '完成',
          content: 'Last-content',
        },
      ],
      compSelectorkey:null,
      typeCheckbox:typeCheckbox,
      activeKey: ['1'],
      expandIconPosition: 'right',
      loading: false,
      ssss: ['合格'],
      dateFormat : 'YYYY-MM-DD',
      time: [],
      fileName: '未选择任何文件',
      FirstContentHeight: 405,
      //---
      reCommpVxeTable: '',
      dataTableConfig: {
        api: assessCheckApi.nprymdPageList,
        rowId: 'id',
        paramet: {
          id: ''
        }
      },
      columnsVxe: [
        {
          type: 'checkbox',
          width: 60,
          fixed: 'left'
        },{
          title: '姓名',
          field: 'realname',
          width: 100,
          titleInterval:true,
          slots: {
              header:'data1_header',
              default: 'operation_realname',
          }
        },{
          title: '性别',
          field: 'sex',
          width: 100,
          titleInterval:true,
          slots: {
              header:'data2_header',
              default: 'operation_sex',
          }
        },{
          title: '工作单位',
          field: 'fgzdw',
        },
        {
          title: '学历/专业',
          field: 'fxl',
          slots: {
              default: 'operation_fxl',
          }
        },{
          title: '审评类型及次数',
          field: 'fjcyxl',
          slots: {
          // 使用插槽模板渲染
            default: 'operation_fjcyxl',
          },
        }
      ],
      formItem: [
        {
          label: '关键字',
          model: 'gjz',
        }
      ],
      idList: [],
      //---
      columnsVxeGs: [
        {
          type: 'checkbox',
          width: 60,
          fixed: 'left'
        },{
          title: '姓名',
          field: 'realname',
          width: 100,
          titleInterval:true,
          slots: {
              header:'data1_header',
              default: 'operation_realname',
          }
        },{
          title: '性别',
          field: 'sex',
          width: 100,
          titleInterval:true,
          slots: {
              header:'data2_header',
              default: 'operation_sex',
          }
        },{
          title: '工作单位',
          field: 'fgzdw',
        },{
          title: '学历/专业',
          field: 'fxl',
          slots: {
              default: 'operation_fxl',
          }
        },{
          title: '审评类型',
          field: 'fjcyxl',
        }
      ],
      //----------
      reCommpVxeTableLc: '',
      dataTableConfigLc: {
        api: assessCheckApi.queryJcyPrInNpmdlcList,
        rowId: 'id',
        paramet: {
          fprjbxxid: ''
        }
      },
      reCommpVxeTableDj: '',
      dataTableConfigDj: {
        api: assessCheckApi.queryJcyPrInPrmdqrlcList,
        rowId: 'id',
        paramet: {
          fprjbxxid: ''
        }
      },
      columnsVxeLc: [
        {
            title: '环节名称',
            field: 'fhjmc',
        },{
            title: '办理人',
            field: 'fdbr',
            width: 100,
            interval:true,
            slots: {
                default:'operation_fdbr',
            }
        },{
            title: '发送人',
            field: 'ffsrmc',
            width: 100,
            interval:true,
            slots: {
                default:'operation_ffsrmc',
            }
        },{
            title: '发送时间',
            field: 'ffssj',
            width: 150,
        },{
            title: '办理时间',
            field: 'fblsj',
        },{
            title: '办理意见',
            field: 'fblyj',
        },{
            title: '操作',
            field: 'jobid',
            width: 250,
            titleInterval:true,
            slots: {
            // 使用插槽模板渲染
                header:'data3_header',
                default: 'operation_btn',
            },
        }
      ],
      //===
        approvalOfMattersKey: '',
        conInterface: {
            paramet: {
                fprjbxxid: '',
            },
            initiateApi: assessCheckApi.initJcyPrInNpmdlc,
            tableApi: assessCheckApi.queryJcyPrInNpmdlcList,
        },
        conInterface2: {
            paramet: {
                fprjbxxid: '',
            },
            initiateApi: assessCheckApi.initJcyPrInPrmdqrlc,
            tableApi: assessCheckApi.queryJcyPrInPrmdqrlcList,
        },
    }
  },
  methods: {
    getData(ids,page){
      //console.log(ids,page)
      // if(page){
        //console.log('99999999999')
        this.current = page
      // }
      //console.log(this.current)
      queryPrdjById({id:ids}).then(res => {
        let data = res.result
        //console.log(data)
        //console.log(data.id)
        //console.log(this.fromState)
        let data1 = {
          id:data.id,
          fprwh:data.fprwh,
          fprfjdz:data.fprfjdz,
          fprsj: data.fprsj?moment(data.fprsj):null,
          fpq: data.fpq,
          fprjssj: data.fprjssj,
          fprsf: data.fprsf,
          fprbzsm: data.fprbzsm,
          fxpjcylb: data.fxpjcylb?data.fxpjcylb.split(','):null,
          fyqjccs: data.fyqjccs,
          fyqkpjg: data.fyqkpjg?data.fyqkpjg.split(','):null,
          fsfjmzyq: data.fsfjmzyq,
          fsxkssj: data.fsxkssj,
          fsxjssj: data.fsxjssj,
          fgskssj : data.fgskssj?moment(data.fgskssj):null,
          fgsjssj : data.fgsjssj?moment(data.fgsjssj):null,
          fgsbm : data.fgsbm,
          fgsdd : data.fgsdd,
          fgsbzsm : data.fgsbzsm,
        }
        this.time = [data.fsxkssj,data.fsxjssj]
        this.fileName = data.fprfjdz?this.fromState.fprwh?this.fromState.fprwh+'.pdf':'聘任文书.pdf':'未选择任何文件'
        this.fromState = data1
        this.dataTableConfig.paramet = {
          id: this.fromState.id
        }
        this.reCommpVxeTable = Date.now()
        //console.log(this.fromState)

        this.conInterface.paramet.fprjbxxid = this.fromState.id
        this.conInterface2.paramet.fprjbxxid = this.fromState.id

      })
    },
    closeVisible(){
      this.increaseVisible = false
      this.fromState = {
        fprsf: '组员',
        fyqkpjg: ['合格'],
        fsfjmzyq: '否',
        fyqjccs: 2
      }
      this.current = 0
      this.loading = false
      this.dataTableConfig.paramet = {
          id: ''
        }
      this.reCommpVxeTable = Date.now()
      this.$emit('success')
    },
    callback(key) {
      },
      callbackDj(key) {
        //console.log(key)
      },
      resetEventXz(){
        this.dataTableConfigLc.paramet.fprjbxxid = this.fromState.id
        this.reCommpVxeTableLc = Date.now()
      },
    collapseChange(key){
      if(key.length == 0){
        this.FirstContentHeight = 160
      } else {
        this.FirstContentHeight = 405
      }
      this.reCommpVxeTable = Date.now()
      //console.log(this.FirstContentHeight)
    },
    next() {
      // this.getData(this.fromState.id)
      this.subClick()
    },
    prev() {
      // this.current--;
      // this.getData(this.fromState.id)
      this.returnClick()
    },
    downloadPdf(href){
      window.open(href,'_blank')
    },
    fprsjChange(date, dateString){
      //console.log(date, dateString);
      this.fromState.fprsj = date?moment(date):null
      this.fprjssjJisuan()
      // //console.log(this.fromState.fprsj)
    },
    fpqChange(val){
      this.fromState.fpq = val
      this.fprjssjJisuan()
    },
    fprjssjJisuan(){
      if(this.fromState.fprsj && this.fromState.fpq){
        var yearTime = new Date(this.fromState.fprsj);
        yearTime=yearTime.setFullYear(yearTime.getFullYear() + this.fromState.fpq);
        yearTime = new Date(yearTime);
        var Y = yearTime.getFullYear() + '-';
        var M = (yearTime.getMonth() + 1 < 10 ? '0' + (yearTime.getMonth() + 1) : yearTime.getMonth() + 1) + '-';
        var D = (yearTime.getDate() < 10 ? '0' + (yearTime.getDate()) : yearTime.getDate());
        this.fromState.fprjssj = Y + M + D
      } else {
        this.fromState.fprjssj = null
      }
    },
    fgskssjChange(date, dateString){
      this.fromState.fgskssj = date?moment(date):null
    },
    fgsjssjChange(date, dateString){
      this.fromState.fgsjssj = date?moment(date):null
    },
    flbChange(val){
      // //console.log(val)
      this.fromState.fxpjcylb = val
      // //console.log(this.fromState.fxpjcylb)
      this.form.setFieldsValue({
        fxpjcylb: val,
      });
      this.saveClick()
    },
    onChange(date, dateString){
      //console.log(date, dateString);
      this.fromState.fsxkssj = dateString[0]
      this.fromState.fsxjssj = dateString[1]
      this.time = dateString
      //console.log(this.time)
    },
    fyqjccsChange(e){
      //console.log(e)
      this.fromState.fyqjccs = 5
      //console.log(typeof this.fromState.fyqjccs)
    },
    fprsfChange(e){
      //console.log(e)
    },
    // 附件
    beforeUpload(e){
      return false
    },
    // 上传附件
    async uploadClick({file}){
      //console.log(file)
      if(!this.fromState.id){
        let data = {}
        data = {
          id:'',
          fxpjcylb:this.fromState.fxpjcylb?this.fromState.fxpjcylb.toString():null,
          fyqjccs:this.fromState.fyqjccs,
          fyqkpjg:this.fromState.fyqkpjg?this.fromState.fyqkpjg.toString():null,
          fsfjmzyq:this.fromState.fsfjmzyq,
          fsxkssj:this.fromState.fsxkssj,
          fsxjssj:this.fromState.fsxjssj,
        }
        const res = await savePrdj(data)
        if (res.success) {
          this.fromState.id = res.result.id
          this.uploadClicka(file,this.fromState.id)
        }
      } else {
        this.uploadClicka(file,this.fromState.id)
      }
    },
    uploadClicka(file,id){
      //console.log(file)
      var that = this
        if(file.type.indexOf('pdf') == -1){
          that.$message.warning('当前仅限上传PDF，请重新选择！')
          return
        }
        if(typeof file.uid !== 'undefined') {
          const fileData = new FormData();
          fileData.append("file",file);
          fileData.append("id",id);
          //console.log(fileData)
          uploadPrdjFile(fileData).then(res => {
            //console.log('fileData',res)
            if (res.success) {
              that.$message.success(res.message)
              that.fileName = that.fromState.fprwh?that.fromState.fprwh+'.pdf':'聘任文书.pdf'
              that.fromState.fprfjdz = res.result.fprfjdz
            } else {
              that.$message.warning(res.message)
            }
          })
        } else {}
    },
    // 暂存
    saveClick(){
      //console.log(this.fromState)
      let data = {}
      if(this.current == 0){
        data = {
          id:this.fromState.id?this.fromState.id:'',
          fxpjcylb:this.fromState.fxpjcylb?this.fromState.fxpjcylb.toString():null,
          fyqjccs:this.fromState.fyqjccs,
          fyqkpjg:this.fromState.fyqkpjg?this.fromState.fyqkpjg.toString():null,
          fsfjmzyq:this.fromState.fsfjmzyq,
          fsxkssj:this.fromState.fsxkssj,
          fsxjssj:this.fromState.fsxjssj,
        }
      }
      if(this.current == 1){
        data = {
          id:this.fromState.id,
          fgskssj: this.fromState.fgskssj?moment(this.fromState.fgskssj).format('YYYY-MM-DD'):'',
          fgsjssj: this.fromState.fgsjssj?moment(this.fromState.fgsjssj).format('YYYY-MM-DD'):'',
          fgsbm: this.fromState.fgsbm,
          fgsdd: this.fromState.fgsdd,
          fgsbzsm: this.fromState.fgsbzsm,
        }
      }
      if(this.current == 2){
        data = {
          id:this.fromState.id?this.fromState.id:'',
          fprwh:this.fromState.fprwh,
          fprsj:moment(this.fromState.fprsj).format('YYYY-MM-DD'),
          fpq: this.fromState.fpq,
          fprjssj: this.fromState.fprjssj,
          fprsf:this.fromState.fprsf,
          fprbzsm:this.fromState.fprbzsm,
        }
      }
      savePrdj(data).then(res => {
        if(res.code == 200){
          // //console.log(this.fromState)
          // //console.log(this.fromState.id)
          this.fromState.id = res.result.id
          this.$message.success(res.message)
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    // 下一步
    async subClick(){
      let data = {}
      let data1 = {}
      if(this.current == 0){
        data1 = {
          id:this.fromState.id?this.fromState.id:'',
          fxpjcylb:this.fromState.fxpjcylb?this.fromState.fxpjcylb.toString():null,
          fyqjccs:this.fromState.fyqjccs,
          fyqkpjg:this.fromState.fyqkpjg?this.fromState.fyqkpjg.toString():null,
          fsfjmzyq:this.fromState.fsfjmzyq,
          fsxkssj:this.fromState.fsxkssj,
          fsxjssj:this.fromState.fsxjssj,
        }
      }
      if(this.current == 1){
        data1 = {
          id:this.fromState.id,
          fgskssj: this.fromState.fgskssj?moment(this.fromState.fgskssj).format('YYYY-MM-DD'):'',
          fgsjssj: this.fromState.fgsjssj?moment(this.fromState.fgsjssj).format('YYYY-MM-DD'):'',
          fgsbm: this.fromState.fgsbm,
          fgsdd: this.fromState.fgsdd,
          fgsbzsm: this.fromState.fgsbzsm,
        }
      }
      if(this.current == 2){
        data1 = {
          id:this.fromState.id?this.fromState.id:'',
          fprwh:this.fromState.fprwh,
          fprsj:moment(this.fromState.fprsj).format('YYYY-MM-DD'),
          fpq: this.fromState.fpq,
          fprjssj: this.fromState.fprjssj,
          fprsf:this.fromState.fprsf,
          fprbzsm:this.fromState.fprbzsm,
        }
      }
      let resA = await savePrdj(data1)
      if(this.current == 0){
        data = {
          id:this.fromState.id?this.fromState.id:'',
          fxpjcylb:this.fromState.fxpjcylb?this.fromState.fxpjcylb.toString():null,
          fyqjccs:this.fromState.fyqjccs,
          fyqkpjg:this.fromState.fyqkpjg?this.fromState.fyqkpjg.toString():null,
          fsfjmzyq:this.fromState.fsfjmzyq,
          fsxkssj:this.fromState.fsxkssj,
          fsxjssj:this.fromState.fsxjssj,
        }
      }
      if(this.current == 1){
        data = {
          id:this.fromState.id?this.fromState.id:'',
          fgskssj: this.fromState.fgskssj?moment(this.fromState.fgskssj).format('YYYY-MM-DD'):'',
          fgsjssj: this.fromState.fgsjssj?moment(this.fromState.fgsjssj).format('YYYY-MM-DD'):'',
          fgsbm: this.fromState.fgsbm,
          fgsdd: this.fromState.fgsdd,
          fgsbzsm: this.fromState.fgsbzsm,
        }
      }
      if(this.current == 2){
        data = {
          id:this.fromState.id?this.fromState.id:'',
          fprwh:this.fromState.fprwh,
          fprsj:moment(this.fromState.fprsj).format('YYYY-MM-DD'),
          fpq: this.fromState.fpq,
          fprjssj: this.fromState.fprjssj,
          fprsf:this.fromState.fprsf,
          fprbzsm:this.fromState.fprbzsm,
        }
      }
      if(this.current == 2 && !this.fromState.fprfjdz){
        this.$message.warning('请上传聘任文书！')
        return
      }
      this.form.validateFields((err, values) => {
          if(!err){
            submitPrdj(data).then(res => {
              if(res.code == 200){
                this.$message.success(res.message)
                this.current++;
                this.reCommpVxeTable = Date.now()
              } else {
                this.$message.warning(res.message)
              }
            })
          }
      })
    },
    // 上一步
    returnClick(){
      let data = {}
      if(this.current == 0){
        data = {
          id:this.fromState.id?this.fromState.id:'',
          fxpjcylb:this.fromState.fxpjcylb.toString(),
          fyqjccs:this.fromState.fyqjccs,
          fyqkpjg:this.fromState.fyqkpjg.toString(),
          fsfjmzyq:this.fromState.fsfjmzyq,
          fsxkssj:this.fromState.fsxkssj,
          fsxjssj:this.fromState.fsxjssj,
        }
      }
      if(this.current == 1){
        data = {
          id:this.fromState.id?this.fromState.id:'',
          fgskssj: moment(this.fromState.fgskssj).format('YYYY-MM-DD'),
          fgsjssj: moment(this.fromState.fgsjssj).format('YYYY-MM-DD'),
          fgsbm: this.fromState.fgsbm,
          fgsdd: this.fromState.fgsdd,
          fgsbzsm: this.fromState.fgsbzsm,
        }
      }
      if(this.current == 2){
        data = {
          id:this.fromState.id?this.fromState.id:'',
          fprwh:this.fromState.fprwh,
          fprsj:moment(this.fromState.fprsj).format('YYYY-MM-DD'),
          fpq: this.fromState.fpq,
          fprjssj: this.fromState.fprjssj,
          fprsf:this.fromState.fprsf,
          fprbzsm:this.fromState.fprbzsm,
        }
      }
      returnPrdj(data).then(res => {
        //console.log(res)
        if(res.code == 200){
          this.$message.success(res.message)
          this.current--;
          this.reCommpVxeTable = Date.now()
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    // 生成拟任名单
    createTableClick(){
      this.form.validateFields((err, values) => {
        // //console.log(err, values)
        // //console.log(this.fromState.fxpjcylb)
          if(!err){
            this.saveClick()
            this.loading = true
            // //console.log(this.fromState.fprsf)
            let formD = {}
            //console.log('formD',formD)
            //console.log('fromState',this.fromState)
            formD = {
              id: this.fromState.id,
              fprwh:this.fromState.fprwh,
              fprsj:moment(this.fromState.fprsj).format('YYYY-MM-DD'),
              fprsf:this.fromState.fprsf,
              fprbzsm:this.fromState.fprbzsm,
              fxpjcylb:this.fromState.fxpjcylb.toString(),
              fyqjccs:this.fromState.fyqjccs,
              fyqkpjg:this.fromState.fyqkpjg.toString(),
              fsfjmzyq:this.fromState.fsfjmzyq,
            }
            //console.log('formD',formD)
            genNprymd(formD).then(res => {
              if(res.code == 200){
                this.$message.success(res.message)
                this.dataTableConfig.paramet = {
                  id: this.fromState.id
                }
                this.reCommpVxeTable = Date.now()
              } else {
                this.$message.warning(res.message)
              }
              this.loading = false
            })
          }
      })
    },
    // 勾选
    checkboxChange(val){
      //console.log('已选择',val)
      this.idList = []
      if(val.length){
          val.forEach(item => {
              this.idList.push(item.id)
          });
      }
    },
    // 搜索
    searchEvent(){
          this.dataTableConfig.paramet = {
              ...this.dataTableConfig.paramet,
          }
      },
      // 重置
      resetEvent(){
          //console.log('重置')
        //console.log('表格初始化')
          this.reCommpVxeTable = Date.now()
          this.dataTableConfig.paramet = {
              ...this.dataTableConfig.paramet,
          }
      },
      // 手动添加人员
      addManClick(){
        //console.log(this.fromState.fxpjcylb)
        if(!this.fromState.fxpjcylb || this.fromState.fxpjcylb.length <= 0){
          this.$message.warning('手动添加拟聘人员前，需勾选拟聘审评类型。')
          return
        }
        this.$nextTick(() => {
          this.$refs.checkManModalRef.visible = true
          this.$refs.checkManModalRef.getData()
        })
      },
      checkManFuntion(item){
        //console.log(item)
        if(item){
          let idList = []
          item.forEach(items => {
            idList.push(items.id)
          })
          sddjRymd({fprjbxxid:this.fromState.id,ids:idList.toString()}).then(res => {
            if(res.code == 200){
              this.$message.success(res.message)
              this.dataTableConfig.paramet = {
                id: this.fromState.id
              }
              this.reCommpVxeTable = Date.now()
            } else {
              this.$message.warning(res.message)
            }
          })
        }
      },
      // 导出
      exportClick(fileTitle){
        // if(this.idList.length == 0){
        //   this.$message.warning('请勾选数据！')
        //   return
        // }
        let that = this
        that.$confirm({
          title: '当前数据全部导出，您确定要导出当前人员名单吗?',
          content: '',
          okText: '确定',
          okType: 'info',
          cancelText: '取消',
          onOk() {
            var fileName = fileTitle
            exportNprymd({id: that.fromState.id}).then((data) => {
              if (!data) {
                  that.$message.warning('文件下载失败')
                  return
              }
              if (typeof window.navigator.msSaveBlob !== 'undefined') {
                  window.navigator.msSaveBlob(new Blob([data], { type: 'application/vnd.ms-excel' }), fileName + '.xls')
              } else {
                  let url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel' }))
                  let link = document.createElement('a')
                  link.style.display = 'none'
                  link.href = url
                  link.setAttribute('download', fileName + '.xls')
                  document.body.appendChild(link)
                  link.click()
                  document.body.removeChild(link) //下载完成移除元素
                  window.URL.revokeObjectURL(url) //释放掉blob对象
              }
            })
          },
          onCancel() {
            //console.log('Cancel');
          },
        });
      },
      // 删除
      deleteClick(){
        if(this.idList.length == 0){
          this.$message.warning('请勾选数据！')
          return
        }
        let that = this
        that.$confirm({
          title: '您确定要移出当前人员名单吗?',
          content: '',
          okText: '确定',
          okType: 'warning',
          cancelText: '取消',
          onOk() {
            nprymdByYcmd({ids: that.idList.toString()}).then(res => {
              if(res.code == 200){
                that.$message.success(res.message)
                that.resetEvent()
              } else {
                that.$message.warning(res.message)
              }
            })
          },
          onCancel() {
            //console.log('Cancel');
          },
        });
      }
  },
}
</script>
<style lang="less">
.form-appointmentOfInspectorsModal-Lu {
    span {
        word-wrap:break-word;
        word-break:break-all;
        // white-space:normal;
    }
    p {
        word-wrap:break-word;
        word-break:break-all;
        white-space:normal;
    }
  .ant-modal {
    background-color: #5ca3e5;
    position: static;
    width: 100%;
    height: 100%;
    top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 auto !important;
  }
  .ant-modal-content {
    height: 100%;
  }
  .ant-modal-body {
    padding: 15px !important;
    background-color: white;
    height: calc(100vh - 50px) !important;
  }
  .ant-modal-wrap {
    background-color: white;
  }
  .ant-modal-footer {
    text-align: center !important;
    .ant-btn-primary {
      background-color: #5ca3e5 !important;
      border-color: #5ca3e5 !important;
    }
  }
  .ant-form-item {
    margin-bottom: 0px;
    textarea.ant-input {
        margin-bottom: 0px;
        height: 46px;
    }
  }
  .steps-content {
    margin-top: 16px;
    border: 1px dashed #e9e9e9;
    border-radius: 6px;
    background-color: #fafafa;
    min-height: 200px;
    // text-align: center;
    // padding-top: 20px;
    overflow: scroll;
    height: calc(100vh - 175px);
  }

  .steps-action {
    margin-top: 10px;
    text-align: right;
  }
  .comp-select-box-a {
    line-height: 1;
  }
  .personal-info-form{
      .ant-form-item{
          margin: 5px 0;
      }
      .ant-form-item-label{
          width: 118px;
      }
      .flex-w-er{
          width: 590px;
          .ant-form-item-control-wrapper{
              width: calc(100% - 118px);
          }
        }
    }
    .commpVxeTable-table {
      border: 1px solid #CCC;
      border-radius: 5px;
      margin-top: 10px;
    }
    .ant-descriptions-bordered .ant-descriptions-item-label {
      // background-color: red;
    }
    .ant-collapse > .ant-collapse-item {
      border-bottom: none !important;
    }
    //---
    .ant-descriptions-bordered .ant-descriptions-item-label{
        font-weight: 600;
        color: rgba(0, 0, 0, 0.85);
        background-color:#e6f7ff;
        width: 150px !important;
        text-align: right;
        font-size: 16px;
    }
    .ant-descriptions-bordered .ant-descriptions-item-label, .ant-descriptions-bordered .ant-descriptions-item-content{
        padding: 5px 10px !important;

    }
    .descriptions-dengji {
        .descriptions-label-slot{
          display: flex;
          align-items: center;
          width: 125px !important;//确保左侧固定文字不会换行
          line-height: 2;
          text-align: center;
          justify-content: center;
      }
      .flex-w-san{
        // width: 885px;
        width: calc(100vw - 1180px);
        min-width: 865px;
        .ant-form-item-control-wrapper{
              width: calc(100% - 118px);
          }
      }
      .flex-w-row {
        width: 100%;
        .ant-form-item-control-wrapper{
              width: calc(100%);
          }
      }
      .flex-w-label {
        .ant-form-item-label{
            width: 250px;
        }
      }
  }
  .commpVxeTable-table {
    border: 1px solid #CCC;
    border-radius: 5px;
    // margin-top: 10px;
  }
  .ant-descriptions-bordered .ant-descriptions-item-label {
    // background-color: red;
  }
  .ant-collapse > .ant-collapse-item {
    border-bottom: none !important;
  }
  //---
  .ant-descriptions-bordered .ant-descriptions-item-label{
      font-weight: 600;
      color: rgba(0, 0, 0, 0.85);
      background-color: #e6f7ff;
      width: 150px;
      text-align: right;
      font-size: 16px;
  }
  .ant-descriptions-bordered .ant-descriptions-item-label, .ant-descriptions-bordered .ant-descriptions-item-content{
      padding: 5px 10px !important;

  }
  .descriptions-dengji {
      .descriptions-label-slot{
        display: flex;
        align-items: center;
        width: 125px !important;//确保左侧固定文字不会换行
        line-height: 2;
        text-align: center;
        justify-content: center;
    }
    .descriptions-content-item {
      .ant-form-item-control-wrapper{
          width: 100%;
      }
    }
  }
  .descriptions-row .descriptions-label-slot{
      display: flex;
      align-items: center;
      width: 300px !important;//确保左侧固定文字不会换行
  }
  .xhText{

      color: #f5222d;
      line-height: 36px;
      font-size: 21px;
      font-weight: 600;
      height: 30px;
  }
  .descriptions-item-center{

  }
  .ant-form-inline .ant-form-item-with-help{
      margin-bottom: 0px !important;
  }
  .zm-form-model{
      display: flex;
      .ant-form-item-control-wrapper{
          flex: 1;
      }
  }
  .ant-descriptions-bordered .ant-descriptions-row{
      border-bottom: 1px solid #e4e3e3;
  }
  .ant-descriptions-bordered .ant-descriptions-item-label, .ant-descriptions-bordered .ant-descriptions-item-content{
      border-right: 1px solid #e4e3e3;
      line-height: 1;
      min-width: 100px;
      // padding: 16px 24px !important;
  }
  .ant-descriptions-bordered .ant-descriptions-view{
      border: 1px solid #e4e3e3;
      border-right: 0;
  }
  .ant-descriptions-row:last-child{
      border-bottom: 0;
  }
  .ant-collapse-header {
    width: auto !important;

  }
  .view-descriptions {
    // .descriptions-content-item {
    //   .ant-form-item-control-wrapper{
    //     background-color: #5ca3e5;
    //       width: 100%;
    //   }
    // }
    th{
      line-height: 3 !important;
    }
  }
  .ant-tabs.ant-tabs-card {
    .ant-tabs-tab {
      font-size: 16px;
    }
    .ant-tabs-bar .ant-tabs-tab-active {
      background: #5ca3e5 !important;
      border-color: #5ca3e5 !important;
      color: #fff;
      font-size: 16px;
    }
    .ant-tabs-top-content{
      /* height: 83vh; */
      height: calc(100vh - 241px);
      overflow: scroll;
    }
  }
}
</style>
